<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<!--[if IE]><script type="text/javascript" src="javascript/excanvas.js"></script><![endif]-->
		<script type="text/javascript" src='javascript/SurfacePlot.js'></script>
		<script type="text/javascript" src='javascript/ColourGradient.js'></script>
		<script type="text/javascript" src="http://www.google.com/jsapi"></script>
		
		<title>SurfacePlot test stub</title>
		
	</head>
	<body>
		
		<script type='text/javascript'>
			
			google.load("visualization", "1");
			google.setOnLoadCallback(setUp);
			
			function setUp()
			{
				var numRows = 45.0;
				var numCols = 45;
				
				var tooltipStrings = new Array();
				var data = new google.visualization.DataTable();
				
				for (var i = 0; i < numCols; i++)
				{
		        	data.addColumn('number', 'col'+i);
				}
				
		        data.addRows(numRows);
				var d = 360 / numRows;
				var idx = 0;
				
				for (var i = 0; i < numRows; i++) 
				{
					for (var j = 0; j < numCols; j++)
					{
						//var value = (Math.cos(i * d * Math.PI / 180.0) * Math.cos(j * d * Math.PI / 180.0) + Math.sin(i * d * Math.PI / 180.0));
						var value = (Math.cos(i * d * Math.PI / 180.0) * Math.cos(j * d * Math.PI / 180.0));
						//var value = (Math.sin(i * d * Math.PI / 180.0) * Math.cos(j * d * Math.PI / 180.0)) * 1.5;
						
						data.setValue(i, j, value / 4.0);
						
						tooltipStrings[idx] = "x:" + i + ", y:" + j + " = " + value;
						idx++;
					}
				}

				var surfacePlot = new greg.ross.visualisation.SurfacePlot(document.getElementById("surfacePlotDiv"));
				var surfacePlot2 = new greg.ross.visualisation.SurfacePlot(document.getElementById("surfacePlotDiv2"));
				
				// Don't fill polygons in IE. It's too slow.
				var fillPly = true;
				
				// Define a colour gradient.
				var colour1 = {red:0, green:0, blue:255};
				var colour2 = {red:0, green:255, blue:255};
				var colour3 = {red:0, green:255, blue:0};
				var colour4 = {red:255, green:255, blue:0};
				var colour5 = {red:255, green:0, blue:0};
				var colours = [colour1, colour2, colour3, colour4, colour5];
				
				// Axis labels.
				var xAxisHeader	= "X";
				var yAxisHeader	= "Y";
				var zAxisHeader	= "Z";
				
				// Define some points to highlight:
				var highlightedPoints = [
				
					// Highlight the polygon at coordinate (20, 10) by coloring it red and applying blue text.
					{
						x: 20,
						y: 10,
						color: "#ff0000",
						textColor: "#0000ff",
						text: "Hello!"
					},
					
					// Highlight the polygon at coordinate (18, 2) by coloring it green and applying red text.
					{
						x: 18,
						y: 2,
						color: "#00ff00",
						textColor: "#ff0000",
						text: "Check out this point."
					}
				
				];
				
				var options = {xPos: 300, yPos: 50, width: 500, height: 500, colourGradient: colours, fillPolygons: fillPly,
					tooltips: tooltipStrings, xTitle: xAxisHeader, yTitle: yAxisHeader, zTitle: zAxisHeader, restrictXRotation: false,
					highlightedPoints: highlightedPoints};
				
				surfacePlot.draw(data, options);
				surfacePlot2.draw(data, options);
				
			}
			
		</script>
		
		<div id='surfacePlotDiv'>
			<!-- SurfacePlot goes here... -->
			
		<div id='surfacePlotDiv2'>
			<!-- SurfacePlot2 goes here... -->
			
		</div>
		
	</body>
</html>
